<div class="container-fluid mt-4">
    <!-- 头部标题 -->
    <div class="card mb-2">
        <!--Card content-->
        <div class="card-body">
            <h6 class="mb-2 mb-sm-0 pt-1" style="text-align: center;">视频统计</h6>
        </div>
    </div>
    <!-- 头部标题-end -->
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg">
            <div class="card mb-2">
                <!--Card content-->
                <div class="card-body">
                    <div id="classCount" style="height: 500px;"></div>
                </div>
            </div>
        </div>
        <div class="col-lg">
            <div class="card mb-2">
                <!--Card content-->
                <div class="card-body">
                    <div id="teacherCount" style="height: 500px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $.ajax({//扇形统计图
        url:"../videoCourse_stu/server/statisticsPage.php",
        type:"post",
    }).done((result)=>{
        {
            let classCharts = echarts.init($("#classCount")[0]);
            let teacherCharts = echarts.init($("#teacherCount")[0]);
        
            function initClassChart(data) {
                let option = {
                    title: {
                        text: '各科视频统计',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        type: 'scroll',
                        top: 40,
                        data: data.legendData,
                        selected: data.selected
                    },
                    series: [
                        {
                            name: '课程',
                            type: 'pie',
                            radius: '70%',
                            center: ['50%', '55%'],
                            data: data.seriesData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                classCharts.setOption(option);
            }
            function initTeacherChart(data) {
                let option = {
                    title: {
                        text: '老师视频统计',
                        left: 'center'
                    },
                    tooltip: {},
                    xAxis: {
                        data: data.legendData1
                    },
                    yAxis: {},
                    dataZoom: [
                        {
                            type:"slider",
                            show: true,
                            startValue: 0,
                            endValue: 3
                        }
                    ],
                    series: [{
                        data: data.seriesData1,
                        type: 'bar'
                    }]
                };
                teacherCharts.setOption(option);
            }
            
            var legendData=[];
            var seriesData=[];
            var selected={};
            for (const p of result) {
                legendData.push(p.courseName);
                seriesData.push({name:p.courseName,value:p.num});
                selected[p.courseName]=true;
            }
            initClassChart({
                legendData,
                selected,
                seriesData,
            });
            
            // initTeacherChart({
            //     legendData1,
            //     seriesData1,
            // });
            window.onresize = function () {
                classCharts.resize();
                teacherCharts.resize();
            }
        }
    });

    $.ajax({//条形统计图
        url:"../videoCourse_stu/server/statisticsPage2.php",
        type:"post",
    }).done((result)=>{
        {
            let teacherCharts = echarts.init($("#teacherCount")[0]);

            function initTeacherChart(data) {
                let option = {
                    title: {
                        text: '老师视频统计',
                        left: 'center'
                    },
                    tooltip: {},
                    xAxis: {
                        data: data.legendData1
                    },
                    yAxis: {},
                    dataZoom: [
                        {
                            type:"slider",
                            show: true,
                            startValue: 0,
                            endValue: 3
                        }
                    ],
                    series: [{
                        data: data.seriesData1,
                        type: 'bar'
                    }]
                };
                teacherCharts.setOption(option);
            }
            var legendData1=[];
            var seriesData1=[];
            var selected1={};
            for (const p of result) {
                legendData1.push(p.teacherName);
                seriesData1.push({name:p.teacherName,value:p.num});
            }
            initTeacherChart({
                legendData1,
                seriesData1,
            });
            window.onresize = function () {
                teacherCharts.resize();
            }
        }
    })
    
</script>